﻿<template>
  <a-modal
    :title="title"
    width="70%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-form-model-item label="服务商" prop="ServiceId">
          <a-select show-search option-filter-prop="children" v-model="entity.ServiceId"  :filter-option="filterOption">
            <a-select-option v-for="(item, index) in ServiceList" :key="index" :value="item.Id">
              {{ item.ServiceName }}
              </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="客户" prop="MID">
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            v-model="entity.MID"
          >
            <a-select-option v-for="item in cusList" :value="item.value" :key="item.value"> {{ item.text }} </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="合同日期">
          <a-form-item
            :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }"
          >
            <a-date-picker style="width: 100%" format="yyyy-MM-dd" v-model="entity.BeginDate"/>
          </a-form-item>
          <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
          <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-date-picker style="width: 100%" v-model="entity.EndDate" format="yyyy-MM-dd"/>
          </a-form-item>
        </a-form-model-item>
        <a-form-model-item label="费率" prop="Rate">
          <a-input v-model="entity.Rate" autocomplete="off" style="width:95%" />(%)
        </a-form-model-item>
        <a-form-model-item label="合同状态" prop="UseStatus">
          <a-select default-value="lucy"  v-model="entity.UseStatus">
            <a-select-option :value="1"> 正常 </a-select-option>
            <a-select-option :value="0"> 失效 </a-select-option>
            <a-select-option :value="2"> 过期 </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  props: {
    parentObj: Object,
  },
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      visible: false,
      loading: false,
      cusList:{},
      ServiceList:[],
      entity: {
        
      },
      rules: {
        ServiceId:[{ required: true, message: '请选择服务商' }],
        MID:[{ required: true, message: '请选择客户' }],
        Rate:[{ required: true, message: '请输入费率' }],
        // UseStatus:[{ required: true, message: '请选择服务商' }],
      },
      title: '',
    }
  },
  methods: {
    init() {
      this.$http
          .post('/Base_leasesystem_merchant/leasesystem_merchant/FullSelect')
          .then((resJson) => {
            this.cusList = resJson.Data
          })
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    GetService(){
      this.$http.post("/Base_Manage/Home/GetService_Select").then((res)=>{
        this.ServiceList = res.Data
      })
    },
    openForm(id, title) {
      this.init()
      this.GetService()
      if (id) {
        this.loading = true
        this.$http
          .post('/Base_leasesystem_servicesign/leasesystem_servicesign/GetTheData', { id: id })
          .then((resJson) => {
            this.loading = false
 
            this.entity = resJson.Data
            this.entity.BeginDate = this.$moment(resJson.Data.BeginDate, 'YYYY-MM-DD')
            this.entity.EndDate = this.$moment(resJson.Data.EndDate, 'YYYY-MM-DD')

            console.log(this.entity);
          })
      }
    },
    handleSubmit() {
      if(this.entity.UseStatus == null){
        this.entity.UseStatus = 1;
      }
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        console.log(this.entity);
        this.$http
          .post('/Base_leasesystem_servicesign/leasesystem_servicesign/SaveData', this.entity)
          .then((resJson) => {
            console.log(resJson)
            this.loading = false

            if (resJson.Success) {
              this.$message.success('操作成功!')
              this.visible = false

              this.parentObj.getDataList()
            } else {
              this.$message.error(resJson.Msg)
            }
          })
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // handleChange(value) {
    //   let obj = {};
    //      obj = this.cusList.find((item)=>{ //这里的Data就是上面遍历的数据源
    //        return item.Id === value; //筛选出匹配数据
    //      });
    //   this.entity.typename = obj.name
    // }
 
  },
}
</script>
